/**
 * create by young (young2f@outlook.com) on 2020/10/26
 */

'use strict';
/**
 * 传入labels和values对象
 * labels:{key:key,label:标题}
 * values:{key:内容}
 */
import React, {Component} from 'react';
import {Tooltip, Descriptions, Tag} from 'antd';
import ViewTitle from '../ViewTitle';
import moment from "moment";

class DescriptionGroup extends Component {
  constructor(props) {
    super(props);
  }

  getItem = () => {
    const {model = {}, values = []} = this.props;
    const temp = [];

    _.map(model, (item, key) => {
      const {label, _type, enableArea = [], tag} = item;
      if (enableArea.includes("detail")) {
        let value = values[key];

        if (value) {
          if (value < 0) {
            value = <Tag color="#f50">{value}</Tag>;
          }
          if (_type === 'date' || _type === 'dateRange') {
            value = moment(value).format('YYYY-MM-DD');
          }
          if (_type === 'time') {
            value = moment(value).format('YYYY-MM-DD HH:mm:ss');
          }
          if (tag) {
            const color = tag[value] ? tag[value] : "#222";
            value = <Tag color={color}>{value}</Tag>;
          }
          temp.push(
            <Descriptions.Item label={label}
            >
              {<Tooltip placement="topRight" title={value}>
                <div style={{width: '180px'}}>{value}</div>
              </Tooltip>}
            </Descriptions.Item>
          );
        } else {
          temp.push(
            <Descriptions.Item label={label}
            >
              {<Tooltip placement="topRight" title={""}>
                <div style={{width: '100px'}}>{""}</div>
              </Tooltip>}
            </Descriptions.Item>
          );
        }
      }


    });
    return temp;
  };

  render() {
    const {title, subTitle, actions, size = 'small', style, column} = this.props;
    return (
      <div>
        {title && <ViewTitle
          title={title}
          subTitle={subTitle}
          style={style}
          actions={actions}
        ></ViewTitle>}
        <Descriptions size={size} bordered column={column}>
          {this.getItem()}
        </Descriptions>
      </div>

    );
  }
}

export default DescriptionGroup;
